<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="position:absolute;background:blue" id="div">我是 div</div>
  <button id="count">我是 count</button>
  <div id="show">我是 show</div>
</body>
</html>
<script src="./Animate.js"></script>
<script>
  // 发布订阅模式
  class Event {
    constructor() {
      this.clientList = {}
    }
    listen(key, fn) {
      if(!this.clientList[key]) {
        this.clientList[key] = []
      }
      this.clientList[key].push(fn)
    }
    trigger() {
      let key = Array.prototype.shift.call(arguments)
      let fns = this.clientList[key]
      if(!fns || fns.length === 0) return false
      for(let i = 0, fn; fn = fns[i++]; ) {
        fn.apply(this, arguments)
      }
    }
    remove(key, fn) {
      let fns = this.clientList[key]
      if(!fns) return false
      if(!fn) {
        fns && (fns.length = 0)
      } else {
        for(let l = fns.length - 1; l >= 0; l--) {
          let _fn = fns[l]
          if(_fn === fn) {
            fns.splice(l, 1)
          }
        }
      }
    }
  }
  let e = new Event()
  let a = (() => {
    let count = 0
    let button = document.getElementById('count')
    button.onclick = () => {
      e.trigger('add', count++)
    }
  })()
  let b = (() => {
    let div = document.getElementById('show')
    e.listen('add', count => {
      div.innerHTML = count
    })
  })()


  
  var div = document.getElementById( 'div' );
  var animate = new Animate(div);
  animate.start('left', 500, 2000, 'linear');

  // 代理模式
  let myImage = (() => {
    let imgNode = document.createElement('img')
    document.body.appendChild(imgNode)
    return {
      setSrc: src => {
        imgNode.src = src
      }
    }
  })()
  let proxyImage = (() => {
    let img = new Image()
    console.log('img', img);
    img.onload = function() {
      console.log('this', this.src)
      myImage.setSrc(this.src)
    } 
    return {
      setSrc: src => {
        myImage.setSrc('C:/Users/Administrator/Pictures/Saved Pictures/WeChat Image_20220317114646.jpg')
        img.src = src
      }
    }
  })()
  proxyImage.setSrc('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXFYWbVd8vJtJ_9ZicrUE1hNkj2JndC5cMcuxKc1de&s')
</script>